<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <div class="search-wrapper">
      <el-form :model="queryParams" ref="queryFormRef" inline>
<!--        <el-form-item label="招标标题" prop="zbbt">-->
<!--          <el-input v-model="queryParams.zbbt" placeholder="请输入招标标题" clearable @keyup.enter="handleQuery" />-->
<!--        </el-form-item>-->
        <el-form-item label="招标编号" prop="zbid">
          <el-input v-model="queryParams.zbid" placeholder="请输入招标编号" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card class="box-card">
      <!-- 操作工具栏 -->
      <template #header>
      </template>

      <!-- 数据表格 -->
      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="招标编号" show-overflow-tooltip align="center" prop="zbid" />
        <el-table-column label="招标标题" show-overflow-tooltip align="center" prop="zbbt" />
        <el-table-column label="供应商编号"  show-overflow-tooltip align="center" prop="gysbh" />
        <el-table-column label="供应商名称" show-overflow-tooltip align="center" prop="gysmc" />
        <el-table-column label="收费金额" show-overflow-tooltip align="center" prop="sfje" />
        <el-table-column label="指标分" show-overflow-tooltip align="center" prop="DF" />
        <el-table-column label="投标文件" show-overflow-tooltip align="center" prop="tbwj" />
        <el-table-column label="状态" show-overflow-tooltip align="center" prop="status">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="info">竞价中</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="success">定标</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="danger">落选</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="create_time" />
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button type="danger" link icon="Delete" @click="handleDelete(scope.row)">删除
            </el-button>
            <el-button type="primary" link @click="dingbiao(scope.row)">定标
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页工具栏 -->
<!--      <div class="pagination-container">-->
<!--        <el-pagination background v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"-->
<!--          :page-sizes="[10, 20, 30, 50]" :total="total" layout="total, sizes, prev, pager, next, jumper"-->
<!--          @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
<!--      </div>-->

      <!-- 添加或修改对话框 -->
      <el-dialog v-model="open" :title="title" width="500px" append-to-body>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="用户id" prop="userId">
            <el-input v-model="form.userId" placeholder="请输入用户id" />
          </el-form-item>
          <el-form-item label="招标标题" prop="zbbt">
            <el-input v-model="form.zbbt" placeholder="请输入招标标题" />
          </el-form-item>
          <el-form-item label="招标ID" prop="zbid">
            <el-input v-model="form.zbid" placeholder="请输入招标ID" />
          </el-form-item>
          <el-form-item label="供应商名称" prop="ggbt">
            <el-input v-model="form.ggbt" placeholder="请输入供应商名称" />
          </el-form-item>
          <el-form-item label="供应商编号(账户)" prop="zbwj">
            <el-input v-model="form.zbwj" placeholder="请输入供应商编号(账户)" />
          </el-form-item>
          <el-form-item label="收费金额" prop="zbms">
            <el-input v-model="form.zbms" placeholder="请输入收费金额" />
          </el-form-item>
          <el-form-item label="投标文件" prop="tbwj">
            <el-input v-model="form.tbwj" placeholder="请输入投标文件" />
          </el-form-item>
          <el-form-item label="状态 0：竞价中 1：定标 2:落选" prop="status">
            <el-input v-model="form.status" placeholder="请输入状态 0：竞价中 1：定标 2:落选" />
          </el-form-item>
          <el-form-item label="开始日期" prop="ksrq">
            <el-input v-model="form.ksrq" placeholder="请输入开始日期" />
          </el-form-item>
          <el-form-item label="结束日期" prop="jsrq">
            <el-input v-model="form.jsrq" placeholder="请输入结束日期" />
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime">
            <el-input v-model="form.createTime" placeholder="请输入创建时间" />
          </el-form-item>
          <el-form-item label="修改时间" prop="updateTime">
            <el-input v-model="form.updateTime" placeholder="请输入修改时间" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  listSysTbApi,
  detailSysTbApi,
  deleteSysTbApi,
  addSysTbApi,
  updateSysTbApi,
  updateDb
} from '@/api/article/tb'

// 遮罩层
const loading = ref(false)
// 选中数组
const selectedIds = ref<any[]>([])
// 总条数
const total = ref(0)
// 表格数据
const dataList = ref([])
// 弹出层标题
const title = ref('')
// 是否显示弹出层
const open = ref(false)
// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
})

// 表单参数
const form = reactive<any>({})
// 表单校验
const rules = reactive({
  id: [
    { required: true, message: "主键id不能为空", trigger: "blur" }
  ],
})

const queryFormRef = ref()
const formRef = ref()

/** 查询列表 */
const getList = () => {
  if (!queryParams.zbid ) {
    ElMessage.error("请输入招标编号")
    return
  }
  loading.value = true
  listSysTbApi(queryParams).then(response => {
    dataList.value = response.data
    // total.value = response.data.total
    loading.value = false
  })
}

/** 取消按钮 */
const cancel = () => {
  open.value = false
  reset()
}

/** 表单重置 */
const reset = () => {
  form.value = {
  }
  formRef.value?.resetFields()
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: { id: any }[]) => {
  selectedIds.value = selection.map(item => item.id)
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset()
  open.value = true
  title.value = "添加投标"
}

/** 修改按钮操作 */
const handleUpdate = (row: any) => {
  reset()
  detailSysTbApi(row.id).then(response => {
    Object.assign(form, response.data)
    open.value = true
    title.value = "修改投标"
  })
}

/** 提交按钮 */
const submitForm = () => {
  formRef.value?.validate((valid: any) => {
    if (valid) {
      if (form.id !== undefined) {
        updateSysTbApi(form).then(response => {
          ElMessage.success("修改成功")
          open.value = false
          getList()
        })
      } else {
        addSysTbApi(form).then(response => {
          ElMessage.success("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 批量删除按钮操作 */
const handleBatchDelete = () => {
  if (!selectedIds.value.length) {
    return
  }
  ElMessageBox.confirm('是否确认删除"' + selectedIds.value.length + '"条数据项?', "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteSysTbApi(selectedIds.value)
  }).then(() => {
    getList()
    ElMessage.success("删除成功")
  })
}

/** 删除按钮操作 */
const handleDelete = (row: any) => {
  ElMessageBox.confirm('是否确认删除编号为"' + row.id + '"的数据项?', "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteSysTbApi(row.id)
  }).then(() => {
    getList()
    ElMessage.success("删除成功")
  })
}


// 添加分页方法
const handleSizeChange = (val: any) => {
  queryParams.pageSize = val
  getList()
}

const handleCurrentChange = (val: any) => {
  queryParams.pageNum = val
  getList()
}
/**定标 */
const dingbiao = (row: any) => {
  ElMessageBox.confirm('是否确认定标供应商"' + row.gysmc + '?', "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    updateDb(row)
  }).then(() => {
    getList()
    ElMessage.success("定标成功")
  })
}
onMounted(() => {
})
</script>
